/*driehoek boven de grond*/
#body{background-color: rgb(100, 166, 46);
height: 300px;
width: 800px;
border-radius: 100px 100px 120px 120px;
position: absolute;
left: 2500px;
top: 1300px;
transform: rotateX(60deg);
z-index: 100;
animation-name: zweven;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#body1{	border-bottom: 370px solid rgb(100, 166, 46);;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	height: 0px;
	width:600px;
    border-radius: 700px 700px 100px 100px;
    position: absolute;
    left: 20px;
top: -240px;
transform: rotateX(50deg);
z-index: 100;
}
#body6{width: 0;
	height: 0;
	border-left: 250px solid transparent;
	border-right: 250px solid transparent;
	border-bottom: 1600px solid rgb(128,128,128);
position: absolute;
top: -1700px;
left: 150px;
z-index: 100;

}
    
#body7{width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-bottom: 900px solid rgb(97, 45, 45);
position: absolute;
top: -900px;
left: 80px;
z-index: 105;}
#body8{width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-right: 150px solid transparent;
	border-bottom: 1200px solid rgb(97, 45, 45);
position: absolute;
top: -1250px;
left: 400px;
z-index: 105;}
#body9{width: 0;
	height: 0;
	border-left: 90px solid transparent;
	border-right: 90px solid transparent;
	border-bottom: 900px solid #926c40;
position: absolute;
top: -870px;
left: 350px;
z-index: 110;}
#body10{width: 0;
	height: 0;
	border-left: 150px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 600px solid #926c40;
position: absolute;
top: -550px;
left: 160px;
z-index: 110;}




#body11{background-color: rgb(255, 255, 255);
    width: 200px;
height: 30px;
transform: rotateX(40deg);
border-radius: 5px 5px 5px 5px;
position: absolute;
left: 200px;
}



/*boompjes op de grond*/
#body12{background-color: rgb(136, 101, 53);
    height: 150px;
width: 15px;
position: absolute;
left: 100px;
top: -50px;
z-index: 130;}

#body13{width: 100px;
	height: 150px;
	background-color: green;
	border-radius: 100px;
	z-index: 130;
	position: absolute;
left: 58px;
top: -150px;
}

#body15{background-color: rgb(136, 101, 53);
    height: 150px;
width: 20px;
position: absolute;
left: 250px;
top: 50px;
z-index: 130;}
#body16{width: 130px;
	height: 170px;
	background-color: green;
	border-radius: 70px 100px 70px 100px;
	z-index: 130;
	position: absolute;
left: 196px;
top: -80px;}



#body17{background-color: rgb(136, 101, 53);
    height: 150px;
width: 15px;
position: absolute;
left: 498px;
top: -130px;
z-index: 105;}
#body18{width: 100px;
	height: 150px;
	background-color: green;
	border-radius: 100px;
	z-index: 130;
	position: absolute;
left: 458px;
top: -225px;
z-index: 105;}

#body24{background-color: rgb(136, 101, 53);
    height: 200px;
width: 25px;
position: absolute;
left: 508px;
top: 110px;
z-index: 140;}
#body25{width: 150px;
	height: 200px;
	background-color: green;
	border-radius: 100px 50px 100px 50px;
	z-index: 130;
	position: absolute;
left: 445px;
top: -30px;
z-index: 140;
}
/*wolkes*/
#body26{background-color: rgb(255, 255, 255);
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 5500px;
	top: 200px;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;}
#body27{background-color: rgb(255, 255, 255);
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 120px;
right: 80px;}
#body28{background-color: rgb(255, 255, 255);
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px;}

#body29{background-color: rgb(255, 255, 255);
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 5500px;
	top: 750px; 
	z-index: 140;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 3s;}
#body30{background-color: rgb(255, 255, 255);
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 99px;
right: 80px;}
#body31{background-color: rgb(255, 255, 255);
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 200px;
    border-radius: 400px}

#body32{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px; 
	position: absolute;
	left: 5500px;
	top: 1300px;
	z-index: 140;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 8.9s;}
#body33{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 130px;
right: 80px;}
#body34{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}

#body35{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 5500px;
	top: 1850px;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 1.5s;}
#body36{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 120px;
right: 80px;}
#body37{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}

#body38{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px;position: absolute;
	left: 5500px;
	top: 2400px;
	z-index: 140;
	animation-name: wolk1;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 6.5s;}
#body39{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 125px;
right: 80px;}
#body40{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}

#body41{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 90px;
	top: 400px;
	animation-name: wolk2;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 1.5s;}
#body42{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 120px;
right: 80px;}
#body43{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}

#body44{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 90px;
	top: 1300px;
	animation-name: wolk2;
	animation-duration: 50s;
	animation-iteration-count: infinite;
animation-delay: 5s;}
#body45{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 120px;
right: 80px;}
#body46{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}

#body47{background-color: aliceblue;
    width: 200px;
    height: 200px;
    border-radius: 100px;
	position: absolute;
	left: 90px;
	top: 2200px;
	z-index: 140;
	animation-name: wolk2;
	animation-duration: 50s;
	animation-iteration-count: infinite;}
#body48{background-color: aliceblue;
    width: 580px;
height: 130px;
border-radius: 100px 100px 50px 50px;
position: relative;
top: 120px;
right: 80px;}
#body49{background-color: aliceblue;
    width: 300px;
    height: 300px;
    position: relative;
    left: 120px;
    bottom: 180px;
    border-radius: 400px}




/*driehoek onder de grond*/
#body2{width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 300px solid transparent;
	border-top: 800px solid #a3794a;
position: absolute;
top: 250PX;
left: 0px;
z-index: 60;
transform: rotateY(-40DEG);
}
#body3{width: 0;
	height: 0;
	border-left: 600px solid transparent;
	border-right: 100px solid transparent;
	border-top: 900px solid #a3794a;
position: absolute;
transform: rotateY(600DEG);
top: -800PX;
left: 300px;
z-index: 80;}
#body4{width: 0;
	height: 0;
	border-left: 350px solid transparent;
	border-right: 500px solid transparent;
	border-top: 1300px solid #a3794a;
position: absolute;
transform: rotateY(600DEG);
top: -800PX;
left: -100px;
z-index: 80;}
#body5{background-color: rgb(100, 166, 46);
	height: 200px;
	width: 950px;
border-radius: 50px 50px 500px 500px;
position: absolute;
top: -820px;
z-index: 100;
left: -115px;
}

/*huisje op de grond */
#body19{background-color: rgb(107, 64, 3);
    height: 280px;
width: 200px;
position: absolute;
left: 500px;
top: -20px;
z-index: 130;
}
#body20{background-color: rgba(161, 238, 255, 0.718);
    height: 100px;
width: 40px;
position: absolute;
outline: #553535 solid 10px;
left: 630px;
top: 65px;
z-index: 130;}
#body21{background-color: rgba(161, 238, 255, 0.718);
    height: 100px;
width: 40px;
position: absolute;
outline: #553535 solid 10px;
left: 530px;
top: 65px;
z-index: 130;}
#body22{background-color: rgb(136, 101, 53);
    height: 200px;
width: 30px;
border-radius: 500px 0px 500px 0px;
position: absolute;
left: 550px;
top: -124px;
z-index: 130;
transform: rotate(75deg);}
#body23{background-color: rgb(136, 101, 53);
    height: 130px;
width: 40px;
border-radius: 0px 1000px 0px 1000px;
position: absolute;
left: 650px;
top: -90px;
z-index: 130;
transform: rotate(-75deg);}

@keyframes zweven {
	0%{position: absolute;
	top: 1300px;}
	33%{position: absolute;
		top: 800px;}
	66%{position: absolute;
			top: 1900px;}
	100%{position: absolute;
		top: 1300px;}
	
}

@keyframes wolk1{
	0%{position: absolute;
	left: 5500px;}
	50%{position: absolute;
	left: -800px;}
	100%{position: absolute;
	left: 6000px;}
}

@keyframes wolk2 {
	0%{position: absolute;
	left: 90px;}
	50%{position: absolute;
	left: 6000px;}
	100%{position: absolute;
	left: -800px;}
}

body {
	background-color: #12647841;
	transition: 1.5s;
	}
	.night-toggle {
	width: 33px;
	height: 33px;
	right: 60px;
	top: -100px;
	position: absolute;
	}
	.night-toggle:hover{
	  cursor: pointer;
	}
	
	.moon {
	
	  background-color: #fdd462;
	  box-shadow: 2px 0px 0px 1px #D19C29;
	  border-radius:50%;
	  width: 206px;
	  height: 206px;
	  transition: 2s;
	}
	.sun {
	  background-color: transparent;
	  box-shadow: -6px 1px 0 3px #275e8e;
	  border-left:20px solid #27476D;
	  border-radius:50%;
	  width: 200px;
	  height: 200px;
	  margin-left:8px;
	  margin-top:0px;
	  transition: 2s;
	}
	
	#body50{background-color: transparent;
	width: 2000px;
	height: 2000px;
	position: absolute;
	left: 35%;
	top: 25%;
	animation-name: round;
	animation-iteration-count: infinite;
	animation-duration: 39s;
	
	}



	@keyframes round {
		0%{transform: rotate(-0deg);}
		100%{transform: rotate(360deg);}
	}